<template>
  <div id="question">
    <!--<div class="search flex space-between">
      <div class="search_btn" style="width: 40px;"><i class="el-icon-search"></i></div>
      <input style="flex: 1" class="search_input" placeholder="请输入关键词"/>
      <div class="search_btn"><i class="el-icon-error" style="color: #b6b7b7; font-size: 15px;"></i></div>
    </div>-->
    <div class="tags">
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="6">
          <div class="grid-content" @click="changeMenu(1)"><span :class="{'active': curTag==1}">产品相关</span></div>
          <div v-show="curTag==1" class="down-line"></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content" @click="changeMenu(2)"><span :class="{'active': curTag==2}">商户注册</span></div>
          <div v-show="curTag==2" class="down-line"></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content" @click="changeMenu(3)"><span :class="{'active': curTag==3}">租金结算</span></div>
          <div v-show="curTag==3" class="down-line"></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content" @click="changeMenu(4)"><span :class="{'active': curTag==4}">其他问题</span></div>
          <div v-show="curTag==4" class="down-line"></div>
        </el-col>
      </el-row>
    </div>
    <div class="block data-list">
      <ul>
        <li v-for="(item, index) in curList" :key="index" @click="goDetail(item.id)"><p>{{item.title}}</p></li>

      </ul>
    </div>

    <div class="aboutusBtnCon">
      <div class="btn" @click="goTel()">电话联系</div>
      <div class="btn btn2" @click="goKf()"><img src="./imgs/kfIcon.png"/> 联系在线客服</div>
    </div>
  </div>
</template>

<script>
  import { KF_TEL,KF_URL } from '../../constants/index'
  export default {
    name: 'company-bill',
    data () {
      return {
        dataList: [[
          {id: 0, title:'优享车是做什么的？', cont: '内容'}
        ],[
          {id: 1, title:'个人车辆出租给企业为什么要注册个体户？', cont: '内容'},
          {id: 2, title:'个体户可以使用自己的银行账户吗？', cont: '内容'},
          {id: 3, title:'全流程需要多长时间？ ', cont: '内容'},
          {id: 4, title:'个体户日常有什么需要处理的工商税务事项？', cont: '内容'},
          {id: 5, title:'如果之前已经注册了个独企业，使用优享车，通过平台注册个体工商户。其经营所得纳稅是各交各的还是需要自己合并纳税？在两个地方各自成立个体工商户，在年底汇算清缴的时候应如何处理？', cont: '内容'},
          {id: 6, title:'个体并没有把车过户给个体户，以个体户的名义出 租车辆，会不会有相关风险？', cont: '内容'},
          {id: 7, title:'如果之前在创业宝注册过个体户，现在使用优享车 如果不想再注册个体户，能否直接使用之前在创业 宝注册的个体户？', cont: '内容'},
        ],[
          {id: 8, title:'车辆的租金是如何给到个人的？', cont: '内容'},
          {id: 9, title:'租金多久能到账，发票多久能开出来？', cont: '内容'},
          {id: 10, title:'出租车辆的租金收入怎么缴税？ ', cont: '内容'},
          {id: 11, title:'发票是怎么开的？', cont: '内容'},
        ],[
          {id: 12, title:'出租用车是否有规格型号限制？', cont: '内容'},
          {id: 13, title:'注册过程中需要额外收取其他费用吗？', cont: '内容'},
          {id: 14, title:'个人的车辆租给企业如何区分公用还是私用？ ', cont: '内容'},
          {id: 15, title:'出租用车只能是车辆所有人（个人）名下的车吗？', cont: '内容'},
        ]],
        curList: [],
        activeName: 'second',
        curTag: 0
      }
    },
    created () {
      let cur = 1;
      if(localStorage.getItem('cur_q_tag')) {
        cur = localStorage.getItem('cur_q_tag');
      }
      this.changeMenu(cur)
    },
    methods: {
      goTel(){
        location.href='tel:'+KF_TEL
      },
      goKf(){
        if(KF_URL){
          location.href=KF_URL
        }

      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //切换标签
      changeMenu(val){
        this.curTag = val;
        localStorage.setItem('cur_q_tag', val)
        this.curList = this.dataList[val-1];
      },
      goDetail(id){
        this.$router.push({
          path: '/center',
          query:{
            funCode: 'qsDetail',
            id: id
          }
        })
      }
    },

  }
</script>

<style lang="scss" scoped>
#question{}
.cancel-btn{
  height: 44px;
  line-height: 44px;
  color: #999999;
  text-align: center;
}
.search {
  margin: 10px 10px;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  background: #fff;
  input {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    border: none;
    outline: none;
    width: 60%;
  }
  .search_btn {
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 5px;
  }
  i {
    color: #999999;
  }
}
.tags{
  background-color: #fff;
margin-top: 10px;
  .row-bg {
    padding: 0px 10px 5px 10px;
  }
  .down-line{height: 4px; width: 20px; background-color: #1C67FF; margin: 0 auto; border-radius: 2px;}
  .grid-content{
    text-align: center;
    font-size: 15px;
    height: 30px;
    line-height:30px;
    color: #999999;
    .active{
      color: #333333;
      font-weight: bold;
    }
  }
}
.block {
  margin: 0px auto;
  border-radius: 10px;
  background-color: #fff;
  padding: 5px 15px;
}
.data-list{
  margin: 10px;
  ul li{
    height: auto;
    font-size: 14px;
    color:#333333;
    border-bottom: 1px solid #EEEEEE;
  }
  ul li:last-child{border-bottom: none;}
}
.fixed-bottom{
  width: 100%;
  position: fixed;
  bottom: 30px;
}
.aboutusBtnCon{
  display: flex;
  position: fixed;
  bottom:0px;
  left:0px;right:0px;
  z-index: 1;
  background-color: #ffffff;
  padding: 20px;
.btn{
  text-align: center;
  line-height: 44px;
  border:1px solid rgba(181,181,181,1);
  border-radius:5px;
  color:#666;
  font-size:15px;
  margin:0 10px;
  width:180px;
}
.btn2{
  width:100%;
  background:rgba(28,103,255,1);
  border:1px solid rgba(28,103,255,1);
  color:#FFF;
img{display: inline;width:18px; position: relative; top:2px;}
}
}

.flex {
  display: flex;
}
.space-around {
  justify-content: space-around;
}
.align-center{
  align-items: center;
}
.space-between {
  justify-content: space-between;
}
</style>
